<template>
  <div class="index-warp">
    <div class="index-top margin-bopt">集团安全环保信息管理系统</div>
    <div class="index-group">
      <custom-title title="消息列表" text-color="#fff" border-color="transparent" :is-icon="false">
        <template #right>
          <cutsom-drop-checkbox :select-columns="targetListCheck" :select-value.sync="tableTargetValue" :is-check-all="checkAll" picker-title="" @change="messageReminderAPPList()" />
        </template>
      </custom-title>
      <div class="d-flex mt-2">
        <custom-radio-tag-homepage field-name="value" :list="list" :check-value="checkValue" @change="tagChange" />
        <div class="checkIcon" @click="allRead"><i class="iconfont">&#xe873;</i></div>
      </div>
      <div class="listInner">
        <ul>
          <li v-for="(item, index) in listData" :key="index" @click="messageToDetails(item)">
            <div class="imgWarp">
              <!--              {{ item }}-->
              <img :src="img[item.messageState === '未读' ? 'unread' : 'read'][item.messageType === '年度重点工作' ? 'icon1' : 'icon2']" alt="">
              <!--              <img :src="item.messageType === '年度重点工作' ? require('@/assets/images/index/index_icon1.png') : require('@/assets/images/index/index_icon2.png')">-->
            </div>
            <div class="warp">
              <div class="topTitle">
                <b>{{ item.messageType }}</b>
                <span>{{ item.messageTime }}</span>
              </div>
              <div class="content">
                <p>{{ item.companyName || '/' }}</p>
                <p>{{ item.operateContent }}</p>
              </div>
            </div>
          </li>
        </ul>
        <customLoadmore
          ref="customLoadmore"
          :page-num="formInline.pageNum"
          :pages="pages"
          @load="
            (pageNum) => {
              messageReminderAPPList(true, pageNum)
            }
          "
        />
      </div>
    </div>
  </div>
</template>

<script>
import { allMessageRead, messageRead, messageReminderAPPList } from '@/api'
import customRadioTagHomepage from '@/views/index/custom-radio-tag-homepage.vue'
import customLoadmore from '@/components/common/custom-loadmore.vue'
import CustomTitle from '@/components/globals/custom-title.vue'
import CutsomDropCheckbox from '@/components/globals/cutsom-drop-checkbox.vue'

export default {
  inject: ['layout'],
  components: {
    CutsomDropCheckbox,
    CustomTitle,
    customLoadmore,
    customRadioTagHomepage
  },
  data() {
    return {
      targetList: [
        // { label: '全部', name: '全部' },
        { label: '安全生产', name: '安全', code: 'safety' },
        { label: '环保管理', name: '环保', code: 'environmental' },
        { label: '消防管理', name: '消防', code: 'fireFighting' },
        { label: '能源管理', name: '能源', code: 'energySources' },
        { label: '碳排放管理', name: '碳排放', code: 'carbonDischarge' }
      ],
      targetListCheck: [],
      tableTargetValue: ['安全'],
      checkAll: true,
      list: [
        {
          label: '全部56条',
          value: 'all'
        },
        {
          label: '未读20条',
          value: 'no'
        },
        {
          label: '集团10条',
          value: 'jt'
        },
        {
          label: '企业55条',
          value: 'qy'
        }
      ],
      listData: [],
      total: 0,
      pages: 0,
      formInline: {
        pageNum: 1,
        pageSize: 10,
        messageState: -1,
        moduleName: '安全',
        sourceType: ''
      },
      checkValue: 'all',
      img: {
        read: {
          icon1: require('@/assets/images/index/index_icon1_read.png'),
          icon2: require('@/assets/images/index/index_icon2_read.png')
        },
        unread: {
          icon1: require('@/assets/images/index/index_icon1.png'),
          icon2: require('@/assets/images/index/index_icon2.png')
        }
      }
    }
  },
  created() {
    this.setModel()
  },
  mounted() {
    this.$nextTick(() => {
      this.AlarmTypeList()
      this.messageReminderAPPList()
    })
  },
  methods: {
    tagChange(tagArg) {
      this.checkValue = tagArg.active
      this.list.map((v) => {
        if (v.label === tagArg.active) {
          this.currentComponent = v.value
        }
      })
      this.formInline.pageNum = 1
      this.formInline.pageSize = 10
      if (tagArg.index === 0) {
        this.formInline = { ...this.formInline, messageState: -1, sourceType: '' }
      } else if (tagArg.index === 1) {
        this.formInline = { ...this.formInline, messageState: 0, sourceType: '' }
      } else if (tagArg.index === 2) {
        this.formInline = { ...this.formInline, messageState: 0, sourceType: '集团' }
      } else if (tagArg.index === 3) {
        this.formInline = { ...this.formInline, messageState: 0, sourceType: '企业' }
      }
      this.messageReminderAPPList()
    },
    handlePages(value) {
      this.formInline.pageNum = value
      this.AlarmTypeList()
    },
    handleTableSearch(val) {
      this.formInline.pageNum = 1
      this.AlarmTypeList()
    },
    // 消息提醒全部标记为已读
    allRead() {
      this.$dialog
        .confirm({
          title: '标记已读',
          message: '是否将消息全部标记为已读',
          confirmButtonColor: '#007bff'
        })
        .then((res) => {
          allMessageRead({ moduleName: this.tableTargetValue.join(',') }).then((result) => {
            this.formInline.pageNum = 1
            this.formInline.pageSize = 10
            this.messageReminderAPPList()
          })
        })
    },
    setModel() {
      const rights = sessionStorage.getItem('rights')
      this.targetListCheck = this.targetList.filter(x => {
        return rights.includes(x.code)
      })
      this.tableTargetValue = [this.targetListCheck[0].name]
    },
    // 单条消息记录标记为已读
    async messageToDetails(item) {
      // if (this.checkValue === 'no') {
      const { status, data } = await messageRead({ messageReminderIds: item.messageReminderId })
      if (status === 0 && data) {
        const { messageType, moduleName } = item
        if (messageType === '隐患台账') {
          // let pathUrl = ''
          const row = Object.assign({}, item)
          row.dangersLedgerId = row.relateId
          const active = '隐患台账'
          let current = ''
          switch (moduleName) {
            case '安全':
              current = '安全生产'
              break
            case '环保':
              current = '环保管理'
              break
            case '能源':
              current = '能源管理'
              break
            case '消防':
              current = '消防管理'
              break
          }
          this.$router.push({
            // 跳转至待审核隐患-隐患排查治理-隐患台账-隐患台账-隐患详情
            path: '/staging/dangerTreatmentDetails',
            query: {
              active,
              current,
              ...row
            }
          })
        } else if (messageType === '年度重点工作') {
          // let pathUrl = ''
          let current = ''
          switch (moduleName) {
            case '安全':
              current = '安全生产'
              break
            case '环保':
              current = '环保管理'
              break
            case '能源':
              current = '能源管理'
              break
            case '消防':
              current = '消防管理'
              break
            case '碳排放':
              current = '碳排放管理'
              break
          }
          this.$router.push({
            // 跳转至 目标职责管理-年度重点工作任务详情
            path: '/staging/AnnualWorkDetails',
            query: {
              current,
              workId: item.relateId
            }
          })
        } else if (messageType === '隐患任务') {
          // const row = Object.assign({}, item)
          this.$router.push({
            // 跳转至 目标职责管理-年度重点工作任务详情
            path: '/task/detail',
            query: {
              checkTaskId: item.relateId
            }
          })
        }
      }
      // } else {
      //   const { messageType, moduleName } = item

      //   if (messageType === '隐患台账') {
      //     // let pathUrl = ''
      //     const row = Object.assign({}, item)
      //     row.dangersLedgerId = row.relateId
      //     const active = '隐患台账'
      //     let current = ''
      //     switch (moduleName) {
      //       case '安全':
      //         current = '安全生产'
      //         break
      //       case '环保':
      //         current = '环保管理'
      //         break
      //       case '能源':
      //         current = '能源管理'
      //         break
      //       case '消防':
      //         current = '消防管理'
      //         break
      //     }
      //     this.$router.push({
      //       // 跳转至待审核隐患-隐患排查治理-隐患台账-隐患台账-隐患详情
      //       path: '/staging/dangerTreatmentDetails',
      //       query: {
      //         active,
      //         current,
      //         ...row
      //       }
      //     })
      //   } else if (messageType === '年度重点工作') {
      //     // let pathUrl = ''
      //     let current = ''
      //     switch (moduleName) {
      //       case '安全':
      //         current = '安全生产'
      //         break
      //       case '环保':
      //         current = '环保管理'
      //         break
      //       case '能源':
      //         current = '能源管理'
      //         break
      //       case '消防':
      //         current = '消防管理'
      //         break
      //       case '碳排放':
      //         current = '碳排放管理'
      //         break
      //     }
      //     this.$router.push({
      //       // 跳转至 目标职责管理-年度重点工作任务详情
      //       path: '/staging/AnnualWorkDetails',
      //       query: {
      //         current,
      //         workId: item.relateId
      //       }
      //     })
      //   } else if (messageType === '隐患任务') {
      //     // const row = Object.assign({}, item)
      //     this.$router.push({
      //       // 跳转至 目标职责管理-年度重点工作任务详情
      //       path: '/task/detail',
      //       query: {
      //         checkTaskId: item.relateId
      //       }
      //     })
      //   }
      // }
    },
    // 报警类别列表
    async AlarmTypeList() {
      this.$refs.customLoadmore.loadStatus = true
      // const { status, data } = await AlarmTypeList(
      //   Object.assign(this.formInline, {
      //     listType: this.tableTargetValue.join(',')
      //   })
      // )
      // if (status === 0 && data) {

      // this.total = data.total
      // this.listData = this.listData.concat(data.list)
      // this.pages = data.pages
      //  }
      this.$refs.customLoadmore.loadStatus = false
    },
    // 消息列表
    async messageReminderAPPList(flag, pageNum) {
      if (flag) {
        this.formInline.pageNum = pageNum
      }
      this.layout.showLoading()
      this.$refs.customLoadmore.loadStatus = true
      const { status, data } = await messageReminderAPPList({
        ...this.formInline,
        moduleName: this.tableTargetValue.join(',')
      })

      if (status === 0 && data) {
        this.list[0].label = `全部${data.allNum}条`
        // this.list[0].label = `全部12986条`
        this.list[1].label = `未读${data.unreadNum}条`
        this.list[2].label = `集团${data.jtUnreadNum}条`
        this.list[3].label = `企业${data.qyUnreadNum}条`

        const name = this.tableTargetValue.join(',')
        if (name.indexOf('能源') !== -1) {
          this.listData = flag ? this.listData.concat(data.syMessageReminderInfoVOS.list) : data.syMessageReminderInfoVOS.list
          this.listData = this.listData.filter(
            item => {
              if (item.moduleName === '能源') { return item.messageType !== '隐患台账' } else {
                return item
              }
            }
          )
          this.pages = data.syMessageReminderInfoVOS.pages
          this.total = data.syMessageReminderInfoVOS.total
        } else {
          this.listData = flag ? this.listData.concat(data.syMessageReminderInfoVOS.list) : data.syMessageReminderInfoVOS.list
          this.pages = data.syMessageReminderInfoVOS.pages
          this.total = data.syMessageReminderInfoVOS.total
        }
      }
      this.layout.hideLoading()
      this.$refs.customLoadmore.loadStatus = false
    }

  }
}
</script>

<style lang="scss">
.index-warp {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: url('~@/assets/images/bj.png') no-repeat;
  background-repeat: no-repeat;
  background-size: 100% 50%;
  .index-group {
    flex: 1;
    overflow: hidden;
    padding: 20px;
    display: flex;
    flex-direction: column;
    .checkIcon {
      width: 70px;
      height: 64px;
      background-color: #4a92ff;
      border-radius: 7px 7px 0px 0px;
      border: solid 2px #ffffff;
      border-bottom-width: 0;
      margin-left: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      .iconfont {
        font-size: 0.56667rem;
      }
    }
  }
  .customDropCheckbox {
    width: 260px;
    height: 64px;
    background: #1350ab60;
    border-radius: 32px;
    border: solid 1px #ffffff;
    .inputBox {
      .iconfont {
        font-size: 44px;
        color: #ffffff;
      }
      .van-cell {
        background: none;
        .van-field__control {
          text-align: left;
          &:disabled {
            color: #ffffff;
            -webkit-text-fill-color: #ffffff;
          }
        }
      }
    }
  }
  .listInner {
    flex: 1;
    background: #ffffff;
    overflow-y: auto;
    ul {
      padding: 10px;
      li {
        display: flex;
        flex-direction: row;
        margin: 0 10px;
        border-bottom: 1px solid #e4e8ef;
        padding: 10px 0;
        .imgWarp {
          width: 54px;
          height: 54px;
          margin-right: 20px;
          img {
            width: 54px;
            height: 54px;
          }
        }
        .warp {
          display: flex;
          flex-direction: column;
          .topTitle {
            display: flex;
            flex-direction: row;
            width: 100%;
            height: 54px;
            align-items: center;
            justify-content: space-between;
            b {
              font-family: MicrosoftYaHei-Bold;
              font-size: 28px;
              font-weight: normal;
              font-stretch: normal;
              letter-spacing: 0px;
              color: #000000;
              font-weight: bold;
            }
            span {
              font-family: MicrosoftYaHei;
              font-size: 24px;
              font-weight: normal;
              font-stretch: normal;
              line-height: 36px;
              letter-spacing: 0px;
              color: #07142e;
            }
          }
          .content {
            font-family: MicrosoftYaHei;
            font-size: 22px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 32px;
            letter-spacing: 0px;
            color: #3a4253;
            padding: 10px 0;
          }
        }
      }
    }
  }
}
</style>
